<template>
  <div class="content">
    <div class="head">
      <el-button type="primary" size="mini" @click="openAdd">添加</el-button>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="ID">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.imageUrl" style="height:50px;width:100px">
        </template>
      </el-table-column>
      <el-table-column label="链接" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.linkUrl }}</span>
        </template>
      </el-table-column>
      <el-table-column label="显示" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.showStatus"
            :active-value="activeValue"
            :inactive-value="inactiveValue"
            @change="changeStatus( scope.row.id)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.$index)">编辑</el-button>
          <el-button type="danger" size="mini" @click="delB(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="visiable" width="500px">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="轮播图名称"></el-input>
        </el-form-item>
        <el-form-item label="链接" prop="linkUrl">
          <el-input v-model="form.linkUrl" placeholder="轮播图跳转链接"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :action="action"
            :headers="header"
            list-type="picture"
            :limit="limit"
            :on-exceed="exceed"
            :file-list="fileList"
            :on-success="uploadSuccess"
            :on-remove="remove"
          >
            <el-button v-if="fileList.length==0" type="primary" size="small">上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="head">
        <el-button type="primary" size="mini" @click="add">{{title}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, changeShow, del } from "../../../api/banner.js";
import { getToken } from "@/utils/auth.js";
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        linkUrl: [{ required: true, message: "请输入链接", trigger: "blur" }]
      },
      activeValue: 0,
      inactiveValue: 1,
      editId: null,
      action: "",
      limit: 1,
      header: {},
      fileList: [],
      title: "添加",
      tableData: [],
      visiable: false,
      form: {
        id: null,
        imageUrl: "",
        linkUrl: "",
        name: ""
      }
    };
  },
  mounted() {
    this.getTableData();
    this.action = this.$UPLOAD;
    this.header = { token: getToken() };
  },
  methods: {
    changeStatus(id) {
      changeShow(id).then(res => {
        this.$message({
          type: "success",
          message: res.message
        });
        this.getTableData();
      });
    },
    //根据链接获取图片名称
    getNameByUrl(url) {
      let index = url.lastIndexOf("/");
      return url.substring(index + 1);
    },
    /**
     * 编辑
     */
    edit(index) {
      this.editId = this.tableData[index].id;
      this.form.name = this.tableData[index].name;
      this.form.linkUrl = this.tableData[index].linkUrl;
      this.fileList = [];
      this.fileList.push({
        name: this.getNameByUrl(this.tableData[index].imageUrl),
        url: this.tableData[index].imageUrl
      });
      this.visiable = true;
      this.title = "修改";
    },
    /**
     * 删除
     */
    delB(id) {
      del(id).then(res => {
        this.$message({
          type: "success",
          message: res.message
        });
        this.getTableData();
      });
    },
    /**
     * 移除成功
     */
    remove(file, fileList) {
      this.fileList = fileList;
    },
    /**
     * 上传成功
     */
    uploadSuccess(response, file, fileList) {
      if (response.code === 2000) {
        this.fileList = fileList;
      } else {
        this.$message({
          type: "warning",
          message: response.message
        });
      }
    },

    /**
     * 超出图片限制
     */
    exceed() {
      this.$message({
        type: "warning",
        message: "超出限制"
      });
    },
    openAdd() {
      this.editId = null;
      this.visiable = true;
      this.fileList = [];
      this.form = {
        id: null,
        imageUrl: "",
        linkUrl: "",
        name: ""
      };
      this.title = "添加";
    },
    /**
     * 添加轮播图
     */
    add() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.fileList.length == 0) {
            this.$message({
              type: "error",
              message: "请上传图片"
            });
            return;
          }
          let url = "";
          console.log(this.fileList[0]);
          if (this.fileList[0].response != null) {
            url = this.fileList[0].response.data;
          } else {
            url = this.fileList[0].url;
          }
          add(this.editId, this.form.name, this.form.linkUrl, url).then(res => {
            this.$message({
              type: "success",
              message: res.message
            });
            this.visiable = false;
            this.fileList = [];
            this.form = {
              id: null,
              imageUrl: "",
              linkUrl: "",
              name: ""
            };
            this.getTableData();
          });
        }
      });
    },
    /**
     * 获取列表
     */
    getTableData() {
      list().then(res => {
        this.tableData = [];
        this.tableData = res.data;
      });
    }
  }
};
</script>

<style>
.content {
  min-width: 1000px;
}
.head {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}
</style>
